<script setup lang="ts">
import { computed, reactive, ref } from "vue";
import type { Ref } from "vue";
import { onClickOutside } from "@vueuse/core";
import useDetailStore from "@/pinia/modules/detailStore/detailStore.ts";

interface Props {
   fullLocation: string;
}

interface Emits {
   (e: "change", locationParams: any): void;
}

const emits = defineEmits<Emits>();
const props = defineProps<Props>();

const detailStore = useDetailStore();

const target = ref<HTMLDivElement>() as Ref<HTMLDivElement>;

/*所有的省市区*/
const cityListAll = ref<any[]>([]);

/*是否显示下拉框*/
const visible = ref<boolean>(false);

/*用户选中的省市区数据*/
const selectLocationParams = reactive({
   provinceCode: "",
   provinceName: "",
   cityCode: "",
   cityName: "",
   countyCode: "",
   countyName: "",
   fullLocation: "",
});

/*基于所有的省市区数据计算出用户点击的省市区*/
const cityList = computed(() => {
   // 默认的城市列表
   let list = cityListAll.value;
   // 处理省
   if (selectLocationParams.provinceName && selectLocationParams.provinceCode) {
      list = list.find(province => province.code === selectLocationParams.provinceCode).areaList;
   }
   // 处理市
   if (selectLocationParams.cityName && selectLocationParams.cityCode) {
      list = list.find(city => city.code === selectLocationParams.cityCode).areaList;
   }
   // 处理区县
   if (selectLocationParams.countyName && selectLocationParams.countyCode) {
      list = list.find(county => county.code === selectLocationParams.countyCode).areaList;
   }
   return list;
});

/*显示和隐藏下拉框的回调函数*/
const toggle = async () => {
   if (visible.value) {
      visible.value = false;
   } else {
      visible.value = true;
      const cityData: any[] = await detailStore.fetchCityData();
      cityListAll.value = cityData;
      for (const selectLocationParamsKey in selectLocationParams) {
         selectLocationParams[selectLocationParamsKey] = "";
      }
   }
};

/*点击的不是下拉组件的事件*/
onClickOutside(target, () => {
   visible.value = false;
});

/*点击省市区的回调函数*/
const selectCity = (city:any) => {
   if (city.level === 0) {
      // 点击的是省
      selectLocationParams.provinceCode = city.code;
      selectLocationParams.provinceName = city.name;
   } else if (city.level === 1) {
      // 点击的是市
      selectLocationParams.cityCode = city.code;
      selectLocationParams.cityName = city.name;
   } else {
      // 点击的是区
      selectLocationParams.countyCode = city.code;
      selectLocationParams.countyName = city.name;
      selectLocationParams.fullLocation = `${selectLocationParams.provinceName} ${selectLocationParams.cityName} ${selectLocationParams.countyName}`;
      visible.value = false;
      emits("change", selectLocationParams);
   }
};

</script>


<template>
   <div class="city" ref="target">
      <div class="select" :class="{active:visible}" @click="toggle">
         <span class="placeholder" v-if="!fullLocation">请选择配送地址</span>
         <span class="value" v-else>{{ fullLocation }}</span>
         <i class="iconfont icon-angle-down"></i>
      </div>
      <div class="option" v-if="visible">
         <span v-if="cityList.length" class="ellipsis" v-for="(item) in cityList" :key="item.id" @click="selectCity(item)">{{ item.name }}</span>
         <div class="loading" v-else><img src="../../assets/images/loading.gif"></div>
      </div>
   </div>
</template>

<style scoped lang="less">
.city {
   display: inline-block;
   position: relative;
   z-index: 400;

   .select {
      border: 1px solid #e4e4e4;
      height: 30px;
      padding: 0 5px;
      line-height: 28px;
      cursor: pointer;

      &.active {
         background: #fff;
      }

      .placeholder {
         color: #999;
      }

      .value {
         color: #666;
         font-size: 12px;
      }

      i {
         font-size: 12px;
         margin-left: 5px;
      }
   }

   .option {
      width: 542px;
      border: 1px solid #e4e4e4;
      position: absolute;
      left: 0;
      top: 29px;
      background: #fff;
      min-height: 30px;
      line-height: 30px;
      display: flex;
      flex-wrap: wrap;
      padding: 10px;

      > span {
         width: 130px;
         text-align: center;
         cursor: pointer;
         border-radius: 4px;
         padding: 0 3px;

         &:hover {
            background: @xtxColor;
            color: #ffffff;
         }
      }

      .loading {
         width: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
         min-height: 200px;

         img {
            width: 50px;
         }
      }
   }
}
</style>
